<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#272e38"
      text-color="#fff"
    >
      <el-menu-item class="noback" style="padding-top: 15px;margin-left: 50px" index="0"><a href="#/">
        <el-image src="https://www.ketangpai.com/Public/Home/img/logo.png"></el-image>
      </a></el-menu-item>
      <el-menu-item index="1"><a href="#/">首页</a></el-menu-item>
      <el-menu-item index="2"><a href="https://www.ketangpai.com/ExcellentResources/indexmain.html?type=1&hid">
        <el-image style="width: 100px;height: 30px;padding-top: 1px"  src="https://www.ketangpai.com/Public/Home/img/summary/huawenmuke.png"></el-image></a></el-menu-item>
      <el-menu-item index="3"><a href="#/teacherTraining">教师培训</a></el-menu-item>


        <el-menu-item index="4"> <a href="#/channel"> 渠道合作</a> </el-menu-item>

      <el-submenu index="5">
        <template slot="title">解决方案</template>
        <el-menu-item class="xx" index="5-1"><a href="https://www.ketangpai.com/index/aplus.html">申请机构版</a>
        </el-menu-item>
        <el-menu-item class="xx" index="5-2"><a href="https://www.ketangpai.com/index/localprivate.html">本地化部署</a>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="6"><a href="#/help">帮助中心</a></el-menu-item>
      <el-submenu index="7">
        <template slot="title">更多</template>
        <el-menu-item class="xx" index="7-1"><a href="https://www.ketangpai.com/VipActivity/vipequitys">会员权益</a>
        </el-menu-item>
        <el-menu-item class="xx" index="7-2"><a href="https://www.ketangpai.com/index/updateDynamics">产品动态</a>
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-show="!hideFlag" style="float: right" index="8">
        <button @click="$router.push('/register')" class="registerbutton">注册</button>
      </el-menu-item>
      <el-menu-item v-show="!hideFlag" style="float: right" index="9">
        <button @click="$router.push('/login')" class="logonButton">登陆</button>
     </el-menu-item>
      <el-menu-item v-show="hideFlag" index="8" style="float: right;margin-right: 30px">
        <a href="#/Main"><el-button class="backClass">进入课堂</el-button></a>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        activeIndex: '1',
        activeIndex2: this.GLOBlE.keyIndex,
        hideFlag:(sessionStorage.getItem("land")=="true"),
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.GLOBlE.keyIndex = key.toString();
        console.log(this.GLOBlE.keyIndex);
      }
    }
  }
</script>

<style scoped>
  a {
    text-decoration: none;
    color: black;
  }

  .el-menu-demo .el-menu-item.is-active {
    background: #2C58AB !important;
  }

  .el-menu-demo .el-menu-item:first-child.is-active {
    background-color: #272e38 !important;
  }

  .el-menu-demo .el-menu-item:first-child:hover {
    background-color: #272e38 !important;
  }

  .el-menu-demo .el-menu-item:last-child.is-active {
    background-color: #272e38 !important;
  }

  .el-menu-demo .el-menu-item:last-child:hover {
    background-color: #272e38 !important;
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: none !important;
  }

  .xx {
    background-color: white !important;
    color: black !important;
  }

  .xx:hover {
    background-color: lightgray !important;
  }
</style>
<style>
  .el-menu--popup-bottom-start {
    margin-top: 5px;
    background-color: white !important;
  }

  .el-menu.el-menu--horizontal {
    border: none !important;
  }
  .backClass{
    background-color: #2C58AB!important;
    border-radius: 60px;
    color: white!important;
    padding: 4px 30px!important;
  }
  .hide{
    display: none;
  }
</style>
